<template>
  <el-row style="background-color: aqua">
    <el-col :span="24"><h1>这是布局的头部</h1></el-col>

  </el-row>
  <el-row style="background-color: aqua">

    <el-col :span="6">

      <el-menu background-color="#545c64" class="el-menu-vertical-demo" active-text-color="#ffd04b" text-color="#fff"
               default-active="1-1">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <location/>
            </el-icon>
            <span>用户管理</span>
          </template>

          <el-menu-item index="1-1">学⽣管理</el-menu-item>
          <el-menu-item index="1-2">班级管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <location/>
            </el-icon>
            <span>角色管理</span>
          </template>

          <el-menu-item index="2-1">学⽣管理</el-menu-item>
          <el-menu-item index="2-2">班级管理</el-menu-item>
        </el-sub-menu>
      </el-menu>


    </el-col>
    <el-col :span="18" style="background-color: #731b1b">
    </el-col>

  </el-row>
  <div>

    <!--   el-dialog     对话框-->
    <!--   对话框绑定model时，一般绑定布尔值，该值表示当前对话框是否显示-->
    <el-dialog v-model="dialogVisible" title="添加用户" width="30%">
      <!--      <span>这是一个添加用户操作</span>-->
      <el-form :model="userForm" ref="userForm" :rules="rules">
        <!--<el-form-item 表单中的每一行，由框架底层提供样式布局>-->
        <!--label 表单的描述-->
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="userForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="userForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker type="data" value-format="YYYY-MM-DD"
                          v-model="userForm.birthday" placeholder="请选择生日"></el-date-picker>
        </el-form-item>

        <el-form-item label="密码" prop="passWord">
          <el-input type="password" v-model="userForm.passWord"></el-input>
        </el-form-item>

        <el-form-item label="电话号码" prop="tel">
          <el-input v-model="userForm.tel"></el-input>
        </el-form-item>
      </el-form>
      <!--#footer 表示当前template中内容 当前对话框的脚步      -->
      <template #footer>
        <!--     class="dialog-footer"  使用elmentui中对话框的样式   -->
        <span class="dialog-footer">
        <el-button type="primary" @click="cancel()">取消</el-button>
        <el-button type="primary" @click="addUser()">确定</el-button>
          </span>
      </template>
    </el-dialog>
    <el-button type="primary" @click="dialogVisible=true">打开对话框</el-button>

    <!--    //v-model:current-page 绑定当前页码-->
    <!--    v-model:page-size绑定每页显示多少条-->
    <!--    background 分页标签的颜色-->
    <!--    绑定总条数total-->
    <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize"
                   background :total="total" @current-change="changeCurPage">

    </el-pagination>


  </div>


</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "NewMenu",
  data() {
    return {
      curPage: 1,
      pageSize: 10,
      total: 100,
      dialogVisible: false,
      userForm: {
        userName: '',
        sex: 0,
        birthday: '',
        passWord: ''
      },
      //required:true  是否必须填写  ，  message 提示消息    trigger:'blur'  失去焦点时触发
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 8, message: '名字长度2-8个字符', trigger: 'blur'}
        ],
        tel: [{required: true, message: '请输入手机号', trigger: 'blur'},
          {pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: "请输入正确格式", trigger: 'blur'}]

      }
    }
  },
  methods: {
    deleteBook(id) {
      alert(JSON.stringify(id))

    },
    cancel() {
      dialogVisible: false,
          this.$refs.userForm.resetFields();
    },
    changeCurPage() {

    },
    addUser() {



      axios.post("/api/user/addUser", this.userForm).then(res => {

        if ("ok" == res.data) {
          ElMessage({
            message: '添加成功',
            type: 'success'
          });

          //清空表单 给当前属性新增ref 属性
          //给需要清空的表单标签添加prop属性
          //   this.userForm = {}//可以清空
          this.$refs.userForm.resetFields();
        }


      })


    }


  }
}

</script>

<style scoped>

</style>